<!DOCTYPE html>
<html>
<head>
    <title>Show PDF</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src='http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js'></script>
    <style type="text/css">
        html,body,#pdf_viewer{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #pdf_viewer{
            top: 50px;
        }

        .close{
            position: fixed;
            right: 10px;
            top: 10px;
            padding: 15px;
            background: #0ff;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div onclick="showPdf()">显示pdf</div>
    <!-- <div id="pdf_viewer"></div> -->
    <div class="close" onclick="removePdf()">x</div>
</body>
<script type="text/javascript">
    function showPdf(){
        let divDom = document.createElement("div");
        divDom.setAttribute('id','pdf_viewer');
        document.body.appendChild(divDom);

        if(PDFObject.supportsPDFs){
            // PDF嵌入到网页
            PDFObject.embed("./message.pdf", "#pdf_viewer" );
        } else {
            
            location.href = "/canvas";
        }
        
        // 还可以通过以下代码进行判断是否支持PDFObject预览
        if(PDFObject.supportsPDFs){
            console.log("Yay, this browser supports inline PDFs.");
        } else {
            console.log("Boo, inline PDFs are not supported by this browser");
        }
    }

    function removePdf(){
        let ppdfViewer=document.getElementById("pdf_viewer");
        ppdfViewer.remove();
    }
</script>
</html>